<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInfo, InfoContainer, AppTable } from "../components";
import { formInfo, tableProps } from "../components/interface";
import { columns } from "./components/columnRA";
defineOptions({
  name: "AppResourceAccess"
});
const propsTable: tableProps = reactive({
  tableData: undefined, // 表格数据
  columns: columns, // 表格样式
  pagination: { pageSize: 10 }, // 分页配置
  onPagination: true // 是否启用分页
});

const clickbtn1 = e => {
  console.log(e);
};
const clickbtn2 = e => {
  console.log(e);
};
</script>

<template>
  <div class="app-ra">
    <el-row class="app-ra-header">
      <InfoContainer> header </InfoContainer>
    </el-row>
    <el-row class="app-ra-center">
      <InfoContainer>
        <el-row>
          <el-button>新增</el-button>
          <el-button>删除</el-button>
        </el-row>
        <el-row>
          <AppTable
            class="add-table"
            :table-data="propsTable.tableData"
            :columns="propsTable.columns"
            :pagination="propsTable.pagination"
            :on-pagination="propsTable.onPagination"
            @clickbtn1="clickbtn1"
            @clickbtn2="clickbtn2"
          >
          </AppTable>
        </el-row>
      </InfoContainer>
    </el-row>
    <el-row class="app-ra-footer">
      <InfoContainer>footer</InfoContainer>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.app-ra {
  display: flex;
  flex-direction: column;
  .app-ra-header {
    // margin-top: 10vh;
  }
  .app-ra-center {
    height: 58vh;
    margin-top: 2vh;
    :deep(.el-table) {
      // 调整table的高度实现自适应，即让table充满整个父元素
      height: calc(58vh - 140px);
    }
  }
  .app-ra-footer {
    margin-top: 2vh;
  }
}
</style>
